<template>
  <view class="mailing-info">
    <view class="list-wrap cbox">
      <view class="title">请邮寄到以下地址：</view>
      <view class="list cbox">
        <view class="item rbox" v-for="(item, idx) in list" :key="idx">
          <text class="tit">{{ item.tit }}</text>
          <text class="msg">{{ item.msg }}</text>
        </view>
      </view>
    </view>

    <view class="mailing-wrap cbox">
      <view class="title">请填写信息：</view>

      <view class="line rbox box_space_b box_y_center">
        <text class="name">寄件人姓名：</text>
        <input type="text" class="info-wrap" placeholder="寄件人姓名" />
      </view>

      <view class="line rbox box_space_b box_y_center">
        <text class="name">寄件人电话：</text>
        <input type="text" class="info-wrap" placeholder="寄件人电话" />
      </view>

      <view class="line rbox box_space_b box_y_center">
        <text class="name">快递单号：</text>
        <input type="text" class="info-wrap" placeholder="快递单号" />
      </view>

      <view class="line rbox box_space_b box_y_center">
        <text class="name">发布类型</text>
        <picker
          mode="selector"
          :range="array"
          :value="arrIdx"
          class="picker-wrap"
          @change="listenerPickerSelected"
        >
          <text>{{ array[arrIdx] }}</text>
        </picker>
      </view>
    </view>

    <view class="single-btn btn-normal rbox box_center btn-position">
      提交信息
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          tit: '收件地址：',
          msg: '北京市海淀区曙光花园中路9号北京市农林科学院内'
        },
        {
          tit: '收件人：',
          msg: '张XX'
        },
        {
          tit: '收件电话：',
          msg: '18611587870'
        }
      ],
      array: ['点击选择', '类型一', '类型二', '类型三', '类型四'],
      arrIdx: 0,
    }
  },
  methods: {
    listenerPickerSelected: function (e) {
      this.arrIdx = e.detail.value
    },
  }
}
</script>

<style lang="scss" scoped>
.mailing-info {
  padding: 40rpx 42rpx 0;
  min-height: 100vh;
  background-color: #f7f7f7;
  .title {
    font-size: 32rpx;
    line-height: 1;
    color: #a1a1a1;
  }
  .list-wrap {
    padding-bottom: 30rpx;
    border-bottom: 1rpx solid #e9e9e9;

    .list {
      margin-top: 30rpx;
      .item {
        &:not(:first-child) {
          margin-top: 15rpx;
        }
        .tit {
          min-width: 6em;
          font-size: 28rpx;
          line-height: 1;
          color: #a1a1a1;
        }
        .msg {
          margin-left: 10rpx;
          font-size: 28rpx;
          line-height: 1.4;
          color: #030303;
        }
      }
    }
  }
  .mailing-wrap {
    padding: 30rpx 0;
  }
}

.line {
  margin-top: 20rpx;
  .name {
    color: #646566;
  }
  .info-wrap,
  .picker-wrap {
    color: #646566;
    width: 70%;
    text-align: center;

    height: 64rpx;
    line-height: 64rpx;
    background: #ffffff;
    box-shadow: 0px 0px 6rpx rgba(0, 0, 0, 0.16);
    border-radius: 24rpx;
  }
}
</style>